<template>

    <div>
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="测试001" name="first">
                    <div id="focus_toolTip" class="special_focus_toolTip" v-html="aoolTopbody">
                    </div>

                    <div id="itemMouseover" v-for="item in dataMose" :title="item.name"
                         style="width: 200px;height: 50px;background-color: #db2222;margin-top: 10px"
                         @mouseenter="GlobalFunc.titleMouseOver($event,15)"
                         @mouseleave="GlobalFunc.titleMouseOut($event)">测试测试
                    </div>
                    <div>
                        {{mapA}}
                    </div>
                    <div>
                        <el-button type="primary" @click="myMap">测试map

                        </el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="myLISEE">测试权限

                        </el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="myLISEEBIM">测试权限

                        </el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="myLISEEBIM33">测试解码权限

                        </el-button>
                        <el-button type="primary" @click="myLISEEBIM44">会很高很高

                        </el-button>
                    </div>
                    <Dropdown
                            transfer
                            placement="right-start"
                            trigger="custom"
                            ref="contextMenu"
                            :visible="currentVisible"
                            @on-clickoutside="handleCancel"
                    >
                        <DropdownMenu slot="list">
                            <DropdownItem>驴打滚</DropdownItem>
                            <DropdownItem>炸酱面</DropdownItem>
                            <DropdownItem>豆汁儿</DropdownItem>
                            <DropdownItem>冰糖葫芦</DropdownItem>
                            <DropdownItem divided>北京烤鸭</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <div title="实现悬停实现悬停的TITLE"
                         @mouseenter="GlobalFunc.titleMouseOver($event,15)"
                         @mouseleave="GlobalFunc.titleMouseOut($event)"
                    >鼠标悬停[直接调用函数版本,设定行字数]
                    </div>

                    <div>
                        <div class="box01">
                            <div class="box01Item"></div>
                        </div>
                    </div>
                    <viewer :images="photo">
                        //photo 一定要一个数组，否则报错
                        <img
                                v-for="(src,index) in photo"
                                :src="src"
                                :key="index"
                        >
                    </viewer>
                </el-tab-pane>
                <el-tab-pane label="测试插槽" name="second">
                    <template>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    fixed
                                    prop="date"
                                    label="日期"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="province"
                                    label="省份"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="city"
                                    label="市区"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址"
                                    width="300">
                            </el-table-column>
                            <el-table-column
                                    label="邮编"
                                    width="120">
                                <template v-slot:default="zip">
                                <span>
                                  {{zip.row.zip}}

                                </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                <template v-slot="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="角色管理" name="third">
                    <el-button type="primary" @click="handleCilck">收缩或展开</el-button>

                    <el-container style="height: 500px; border: 1px solid #eee">
                        <el-aside v-if="menuShow" width="200px" style="background-color: rgb(238, 241, 246)">
                            <el-menu :default-openeds="['1', '3']">
                                <el-submenu index="1">
                                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                                    <el-menu-item-group>
                                        <template slot="title">分组一</template>
                                        <el-menu-item index="1-1">选项1</el-menu-item>
                                        <el-menu-item index="1-2">选项2</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="分组2">
                                        <el-menu-item index="1-3">选项3</el-menu-item>
                                    </el-menu-item-group>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-submenu index="2">
                                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                                    <el-menu-item-group>
                                        <template slot="title">分组一</template>
                                        <el-menu-item index="2-1">选项1</el-menu-item>
                                        <el-menu-item index="2-2">选项2</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="分组2">
                                        <el-menu-item index="2-3">选项3</el-menu-item>
                                    </el-menu-item-group>
                                    <el-submenu index="2-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                                    <el-menu-item-group>
                                        <template slot="title">分组一</template>
                                        <el-menu-item index="3-1">选项1</el-menu-item>
                                        <el-menu-item index="3-2">选项2</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="分组2">
                                        <el-menu-item index="3-3">选项3</el-menu-item>
                                    </el-menu-item-group>
                                    <el-submenu index="3-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                            </el-menu>
                        </el-aside>

                        <el-container>
                            <el-header style="text-align: right; font-size: 12px">
                                <el-dropdown>
                                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>查看</el-dropdown-item>
                                        <el-dropdown-item>新增</el-dropdown-item>
                                        <el-dropdown-item>删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <span>王小虎</span>
                            </el-header>

                            <el-main>
                                <el-table :data="tableData">
                                    <el-table-column prop="date" label="日期" width="140">
                                    </el-table-column>
                                    <el-table-column prop="name" label="姓名" width="120">
                                    </el-table-column>
                                    <el-table-column prop="address" label="地址">
                                    </el-table-column>
                                </el-table>
                            </el-main>
                        </el-container>
                    </el-container>
                </el-tab-pane>
                <el-tab-pane label="滚动条" name="fourth">
                    <h1 @click="testNo">09090</h1>
                    <div class="scroller">
                        <div style="height: 500px">
                            <el-row :gutter="10">
                                <!--                            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>-->
                                <el-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl">
                                    <div class="grid-content bg-purple"></div>
                                </el-col>
                            </el-row>

                        </div>


                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>

    </div>
</template>
<script>
  import {Notification} from 'element-ui';

  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      };
      return {
        grid: {
          xs: 8,
          sm: 6,
          md: 4,
          lg: 3,
          xl: 1,
        },
        menuShow: true,

        photo: [
          'https://res8.vmallres.com/shopdc/pic/70883859-2661-41dc-88fe-1ca1974b50cc.jpg',
        ],
        activeName: 'fourth',
        posX: 0,
        posY: 0,
        currentVisible: false,
        locator: null,
        mapA: '',
        data_content: [],
        seen: false,
        x: 0,
        y: 0,
        positionStyle: {top: '20px', left: '20px'},
        aoolTopbody: '',
        showTooTip: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
        dataMose: [
          {
            name: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
          }, {
            name: '测试',
          }, {
            name: '测试',
          }, {
            name: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
          }, {
            name: '测试',
          },
        ],
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333,
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333,
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333,
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333,
          }],
      };
    },
    created() {
      this.myMap();

    },
    methods: {
      testNo() {
        this.$alert('当前席位未绑定地址,请退出', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.dealKickedOffline();
          }
        });
        let A = '00'
        let B = '00-001'
        let C = '00-002'
        let D = '00-003-002-001'
        console.log(A.split('-'));
        console.log(C.split('-'));
        console.log(D.split('-'));
      },
      tt() {
        alert(88);
      },
      handle2() {
        if (this.isCollapse) { //如果目前是收缩状态，不允许右边展开
          this.isCollapse = false;
        } else {// 如果是展开状态，那就正常显示
          this.isCollapse = true;
        }

      },
      handleCilck() {
        this.menuShow = !this.menuShow;

      },
      testMouseOver(e, words_per_line) {
        console.log('obj');
        console.log(e);
        this.GlobalFunc.titleMouseOver(e, words_per_line);
      },
      GLOBALItemMouseover(e, id) {
        console.log(this.GlobalFunc.GLOBALItemMouseover(e, id));
        this.aoolTopbody = this.GlobalFunc.GLOBALItemMouseover(e, id);
      },
      itemMouseover: function(e, toolTipId) {
        console.log(e.target.id);
        var focusTooltip = $('#' + toolTipId);
        focusTooltip.css('top', e.clientY - 50 + 'px');
        focusTooltip.css('left', e.clientX + 'px');
        var headerHtml =

            '<div style=\'font-size:12px;color: #fec443;font-weight: bold;font-family: SourceHanSansCN;\'>' +
            e.target.title +
            '</div>';
        var effectHtml =
            '<div style=\'font-size:12px;margin-top:5px;\'>' + '</div>';
        this.GlobalFunc.toolTopbody = headerHtml + effectHtml;
        focusTooltip.css('display', 'block');
      },

      itemMouseout: function(toolTipId) {
        var focusTooltip = $('#' + toolTipId);
        focusTooltip.css('display', 'none');
      },

      itemMousemove2: function(e) {
        var self = this;
        var focusTooltip = $('#focus_toolTip');
        focusTooltip.css('top', e.clientY - 80 + 'px');
        focusTooltip.css('left', e.clientX + 100 + 'px');
        var headerHtml =
            '<div style=\'font-size:12px;color: #fec443;font-weight: bold;font-family: SourceHanSansCN;\'>' +
            '我的悬浮框参考：' +
            '</div>';
        var effectHtml =
            '<div style=\'font-size:12px;margin-top:5px;\'>' + '</div>';
        self.toolTopbody = headerHtml + effectHtml;
      },
      myLISEE() {
        let arr1 = [true, true, false];
        let arr2 = [
          {
            id: 1,
            index: false,
          }, {
            id: 2,
            index: false,
          }, {
            id: 3,
            index: false,
          },
        ];
        let list = [
          {
            lise: [true, true, false],
          },
          {
            lise: [true, false, true],
          },
        ];
        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            if (arr1[i]) {
              arr2[i].index = true;
            }
          }

        }

        function getSelfLise(arrA, arrB) {
          for (let i = 0; i < arrA.length; i++) {
            for (let j = 0; j < arrB.length; j++) {
              if (arrA[i]) {
                arrB[i].index = true;
              }
            }

          }
          return arrB;
        }

        for (let t = 0; t < list.length; t++) {
          console.log('list[t].lise');
          console.log(list[t].lise);
          let returnData = getSelfLise(list[t].lise, arr2);
          console.log('returnData');
          console.log(returnData);
        }
        console.log(arr2);

      },
      myLISEEBIM() {
        let list = [
          {
            id: 91,
            index: 0,
            name: '调度',
          }, {
            id: 92,
            index: 0,
            name: '对讲',
          }, {
            id: 1222,
            index: 0,
            name: '对讲',
          }, {
            id: 102,
            index: 0,
            name: '对讲',
          },
        ];
        let myArr = [
          {
            id: 91,
            index: 0,
            name: '调度',
            switch: false,
          }, {
            id: 92,
            index: 0,
            name: '对讲',
            switch: false,
          }, {
            id: 93,
            index: 0,
            name: '消息', switch: false,
          }, {
            id: 94,
            index: 0,
            name: '坐席', switch: false,
          }, {
            id: 95,
            index: 0,
            name: '设置', switch: false,
          }, {
            id: 96,
            index: 0,
            name: '功能页', switch: false,
          }, {
            id: 97,
            index: 0,
            name: '个人主页', switch: false,
          }, {
            id: 98,
            index: 0,
            name: '系统通讯录', switch: false,
          }, {
            id: 99,
            index: 0,
            name: '历史通话', switch: false,
          }, {
            id: 100,
            index: 0,
            name: '通知查看', switch: false,
          }, {
            id: 101,
            index: 0,
            name: '会议', switch: false,
          }, {
            id: 102,
            index: 0,
            name: '广播通知', switch: false,
          }, {
            id: 103,
            index: 0,
            name: '组织机构管理', switch: false,
          }, {
            id: 104,
            index: 0,
            name: '调度台用户管理', switch: false,
          }, {
            id: 105,
            index: 0,
            name: '终端用户管理', switch: false,
          }, {
            id: 106,
            index: 0,
            name: '对讲组管理', switch: false,
          }, {
            id: 107,
            index: 0,
            name: '个人通讯录管理', switch: false,
          }, {
            id: 108,
            index: 0,
            name: '系统通讯录管理', switch: false,
          }, {
            id: 109,
            index: 0,
            name: '权限组管理', switch: false,
          }, {
            id: 110,
            index: 0,
            name: '角色管理', switch: false,
          }, {
            id: 111,
            index: 0,
            name: '紧急号码管理', switch: false,
          }, {
            id: 112,
            index: 0,
            name: '虚拟组管理', switch: false,
          },

        ];
        let arry2 = [91, 92, 93];

        function getSelfLise(arrA, arrB) {
          for (let i = 0; i < arrA.length; i++) {
            for (let j = 0; j < arrB.length; j++) {
              if (arrA[i]) {
                arrB[i].index = true;
              }
            }

          }
          return arrB;
        }

        for (let i = 0; i < myArr.length; i++) {
          for (let t = 0; t < list.length; t++) {
            if (list[t].id === myArr[i].id) {
              console.log('77');
              console.log(list[t].id);
              console.log('第几位');
              console.log(myArr[i]);
              myArr[i].switch = true;
            } else {
              console.log('88');
            }
          }

        }

      },
      myMap() {
        console.log('this.$store.getters.stateAllSubType');
        console.log(this.$store.getters.stateAllSubType);
        console.log(this.$store.getters.stateAllSubTypeObj);
        /*        // Win_SetDownloadFile("http://42.101.38.101:1605/10002-10007-2020-10-20-16-21-11.mp4", "测试文件.mp4");
let ipUrl = "http://42.101.38.101:1605/10002-10007-2020-10-20-16-21-11.mp4";
let fileName = "测试文件名下载";
        let a = document.createElement('a');
        //
        // a.setAttribute('download', fileName);
        a.download = fileName;
        a.href = ipUrl;
        a.click();*/

      },
      myMap2() {
        console.log('kfdkfk');
        console.log(this.$store.getters.stateAllSubTypeObj);
        let mapA = new Map();
        mapA.set('name', '张三');
        mapA.set('age', '12');
        mapA.forEach((value, index) => {
          return value;

        });
        console.log(mapA);
        /* for (var [key, value] of mapA) {
          console.log(key + " = " + value);
        }*/
        let arry = [
          {
            name: 'jsj',
            age: 12,
          }, {
            name: 'jsj',
            age: 12,
          }, {
            name: 'jsj',
            age: 12,
          },
        ];
        let aa = arry.map((value, index) => {
          return value;
        });
        console.log(aa);
        this.mapA = mapA;
      },
      createLocator() {
        // 获取Dropdown
        const contextmenu = this.$refs.contextMenu;
        // 创建locator
        const locator = document.createElement('div');
        locator.style.cssText = `position:fixed;left:${this.posX}px;top:${this.posY}px`;
        document.body.appendChild(locator);
        // 将locator绑定到Dropdown的reference上
        contextmenu.$refs.reference = locator;
        this.locator = locator;
      },
      removeLocator() {
        if (this.locator) document.body.removeChild(this.locator);
        this.locator = null;
      },
      handleContextmenu({button, clientX, clientY}) {
        if (button === 2) {
          if (this.posX !== clientX) this.posX = clientX;
          if (this.posY !== clientY) this.posY = clientY;
          if (this.trigger !== 'custom') {
            this.createLocator();
            this.currentVisible = true;
          }
        }
      },
      handleCancel() {
        this.currentVisible = false;
        this.removeLocator();
      },
      myLISEEBIM33() {
        const decode = function(license, daslength) {
          if (typeof license === 'undefined') {
            license = 0;
          }
          // let license_decoded = ('000000' + license.toString(2)).split('').reverse();
          let license_decoded = license.toString(2);

          function buling(a, length) {
            return a.padStart(length, 0);
          }

          console.log('总长度' + daslength);
          let getlicense_decoded = buling(license_decoded, daslength); //'00010010'
          console.log(getlicense_decoded);
          getlicense_decoded.split('');
          var temp = [];
          let returnRules = (() => {
            var temp = [];
            getlicense_decoded.split('').forEach(function(value, index) {
              temp[index] = value === '1';
            });
            return temp;
          })();
          console.log(returnRules);
          return returnRules;
        };

        function getSelfLise(arrA, arrB) {
          for (let i = 0; i < arrA.length; i++) {
            for (let j = 0; j < arrB.length; j++) {
              if (arrA[i]) {
                arrB[i].switch = true;
              }
            }
          }
          return arrB;
        }

        let dasTanceLicenseArry = [
          {
            id: 91,
            index: 0,
            name: '调度',
            switch: false,
          }, {
            id: 92,
            index: 1,
            name: '对讲',
            switch: false,
          }, {
            id: 93,
            index: 2,
            name: '消息', switch: false,
          }, {
            id: 94,
            index: 3,
            name: '坐席', switch: false,
          }, {
            id: 95,
            index: 4,
            name: '设置', switch: false,
          }, {
            id: 96,
            index: 5,
            name: '功能页', switch: false,
          }, {
            id: 97,
            index: 6,
            name: '个人主页', switch: false,
          }, {
            id: 98,
            index: 7,
            name: '系统通讯录', switch: false,
          }, {
            id: 99,
            index: 8,
            name: '历史通话', switch: false,
          }, {
            id: 100,
            index: 9,
            name: '通知查看', switch: false,
          }, {
            id: 101,
            index: 10,
            name: '会议', switch: false,
          }, {
            id: 102,
            index: 11,
            name: '广播通知', switch: false,
          }, {
            id: 103,
            index: 12,
            name: '组织机构管理', switch: false,
          }, {
            id: 104,
            index: 0,
            name: '调度台用户管理', switch: false,
          }, {
            id: 105,
            index: 13,
            name: '终端用户管理', switch: false,
          }, {
            id: 106,
            index: 14,
            name: '对讲组管理', switch: false,
          }, {
            id: 107,
            index: 15,
            name: '个人通讯录管理', switch: false,
          }, {
            id: 108,
            index: 16,
            name: '系统通讯录管理', switch: false,
          }, {
            id: 109,
            index: 17,
            name: '权限组管理', switch: false,
          }, {
            id: 110,
            index: 18,
            name: '角色管理', switch: false,
          }, {
            id: 111,
            index: 19,
            name: '紧急号码管理', switch: false,
          }, {
            id: 112,
            index: 20,
            name: '虚拟组管理', switch: false,
          },

        ];
        let userRoles = [];
        let userLicense = [];
        // let license_decoded =license.toString(2);

        let userLicense2 = '0010010000000000000000';
        /*10010000000000000000*/
        let datas = [
          /* {
             name: '调度1',
             license: 45056,
           },*/ {
            name: '调度1',
            license: 1638400,
          },
        ];
        for (let i = 0; i < datas.length; i++) {
          userRoles.push(datas[i].name);
          let returnData = getSelfLise(decode(datas[i].license, dasTanceLicenseArry.length), dasTanceLicenseArry);
          console.log('returnData');
          console.log(returnData);
        }
      },
      myLISEEBIM44() {
        function getFilesuffix(fileName) {
          var first = fileName.lastIndexOf('.');//取到文件名开始到最后一个点的长度
          var namelength = fileName.length;//取到文件名长度
          var filesuffix = fileName.substring(first + 1, namelength);//截取获得后缀名
          return filesuffix;
        }

        var fileName = 'http://192.168.0.201:1603/scs/doc/subscriber_poc.xls';

        console.log(getFilesuffix(fileName));
      },
    },
    mounted() {
      document.addEventListener('contextmenu', this.handleContextmenu, true);
      document.addEventListener('mouseup', this.handleContextmenu, true);
    },
    destroyed() {
      document.removeEventListener('contextmenu', this.handleContextmenu, true);
      document.removeEventListener('mouseup', this.handleContextmenu, true);
    },
  };
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .title_focus_toolTip {
        z-index: 7;
        position: absolute;
        display: none;
        min-width: 200px;
        min-height: 50px;
        max-width: 200px;
        word-break: normal;
        border-style: solid;
        transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        background-color: rgba(50, 50, 50, 0.701961);
        border-width: 0px;
        border-color: #333333;
        border-radius: 4px;
        color: #ffffff;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-stretch: normal;
        font-size: 14px;
        font-family: SourceHanSansCN;
        line-height: 21px;
        padding: 10px 10px;
        z-index: 9999 !important;
        pointer-events: none;
    }

    .a {
        width: 20px !important;
    }

    .hover_con {
        position: absolute;
        z-index: 9999;
    }

    .special_focus_toolTip {
        z-index: 2000;
        position: absolute;
        display: none;
        /*min-width: 200px;*/
        min-height: 80px;
        max-width: 200px;
        word-break: normal;
        border-style: solid;
        transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        background-color: rgba(50, 50, 50, 0.701961);
        border-width: 0px;
        border-color: #333333;
        border-radius: 4px;
        color: #ffffff;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-stretch: normal;
        font-size: 14px;
        font-family: SourceHanSansCN;
        line-height: 21px;
        padding: 10px 10px;
    }

    .box01 {
        height: 300px;
        width: 300px;
        background-color: #e22626;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .box01Item {
        width: 100px;
        height: 50px;
        background-color: #122442;
        display: inline-block;
    }

    .scroller {
        height: 300px;
        overflow-y: auto;
    }

    .scroller::-webkit-scrollbar {

        width: 10px;

    }

    .scroller::-webkit-scrollbar-track {

        background: #999;

        border-radius: 2px;

    }

    .scroller::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        background: red;

        border-radius: 10px;

    }

    .scroller::-webkit-scrollbar-thumb:hover {

        background: #333;

    }

    .scroller::-webkit-scrollbar-corner {

        background: #179a16;

    }

    .scroller::-webkit-scrollbar-button {
        width: 30px;
    }
</style>
